<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>减肥大师 - 运动计划</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .exercise-tabs {
            display: flex;
            background-color: white;
            border-radius: 12px;
            margin-bottom: 16px;
            padding: 4px;
        }
        
        .exercise-tab {
            flex: 1;
            text-align: center;
            padding: 12px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
        }
        
        .exercise-tab.active {
            background-color: #22C55E;
            color: white;
        }
        
        .progress-header {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .progress-title {
            font-size: 18px;
            font-weight: 600;
            flex: 1;
        }
        
        .progress-stats {
            display: flex;
            margin-bottom: 24px;
        }
        
        .progress-stat {
            flex: 1;
            background-color: white;
            border-radius: 12px;
            padding: 16px;
            margin-right: 12px;
            text-align: center;
        }
        
        .progress-stat:last-child {
            margin-right: 0;
        }
        
        .progress-value {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 4px;
            color: #22C55E;
        }
        
        .progress-label {
            font-size: 12px;
            color: #6B7280;
        }
        
        .workout-card {
            background-color: white;
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        
        .workout-header {
            display: flex;
            position: relative;
            height: 160px;
        }
        
        .workout-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .workout-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            color: white;
        }
        
        .workout-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .workout-subtitle {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .workout-details {
            padding: 16px;
        }
        
        .workout-description {
            font-size: 14px;
            color: #4B5563;
            margin-bottom: 16px;
            line-height: 1.6;
        }
        
        .workout-stats {
            display: flex;
            margin-bottom: 16px;
        }
        
        .workout-stat {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px;
            border-right: 1px solid #E5E7EB;
        }
        
        .workout-stat:last-child {
            border-right: none;
        }
        
        .workout-stat-value {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .workout-stat-label {
            font-size: 12px;
            color: #6B7280;
        }
        
        .exercise-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #E5E7EB;
        }
        
        .exercise-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .exercise-number {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: #DCFCE7;
            color: #22C55E;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            margin-right: 12px;
        }
        
        .exercise-info {
            flex: 1;
        }
        
        .exercise-name {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .exercise-duration {
            font-size: 12px;
            color: #6B7280;
        }
        
        .exercise-video-btn {
            color: #22C55E;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .recommendation-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .recommendation-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .recommendation-list {
            display: flex;
            overflow-x: scroll;
            padding-bottom: 8px;
            margin-bottom: 20px;
            scrollbar-width: none; /* Firefox */
        }
        
        .recommendation-list::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Edge */
        }
        
        .recommendation-item {
            flex: 0 0 240px;
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-right: 12px;
        }
        
        .recommendation-image {
            width: 100%;
            height: 140px;
            object-fit: cover;
        }
        
        .recommendation-info {
            padding: 12px;
        }
        
        .recommendation-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .recommendation-meta {
            display: flex;
            font-size: 12px;
            color: #6B7280;
            margin-bottom: 8px;
        }
        
        .recommendation-meta-item {
            display: flex;
            align-items: center;
            margin-right: 12px;
        }
        
        .recommendation-meta-item i {
            margin-right: 4px;
            font-size: 12px;
        }
        
        .activity-history {
            margin-top: 32px;
            margin-bottom: 16px;
        }
        
        .activity-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .activity-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .activity-item {
            background-color: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        
        .activity-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            font-size: 20px;
        }
        
        .activity-running {
            background-color: #DBEAFE;
            color: #3B82F6;
        }
        
        .activity-yoga {
            background-color: #FCE7F3;
            color: #EC4899;
        }
        
        .activity-gym {
            background-color: #FEF3C7;
            color: #F59E0B;
        }
        
        .activity-info {
            flex: 1;
        }
        
        .activity-name {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .activity-meta {
            display: flex;
            font-size: 12px;
            color: #6B7280;
        }
        
        .activity-meta-item {
            display: flex;
            align-items: center;
            margin-right: 10px;
        }
        
        .activity-meta-item i {
            margin-right: 4px;
            font-size: 10px;
        }
        
        .activity-calories {
            font-weight: 600;
            color: #22C55E;
        }
    </style>
</head>
<body>
    <div class="phone-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-time">14:30</div>
            <div class="status-bar-icons">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi"></i>
                <i class="fas fa-battery-three-quarters"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-title">运动计划</div>
            <button class="nav-btn"><i class="fas fa-sliders-h"></i></button>
        </div>
        
        <!-- 内容区域 -->
        <div class="content-container">
            <!-- 标签栏 -->
            <div class="exercise-tabs">
                <div class="exercise-tab active">计划</div>
                <div class="exercise-tab">记录</div>
                <div class="exercise-tab">发现</div>
            </div>
            
            <!-- 本周进度 -->
            <div class="progress-header">
                <div class="progress-title">本周进度</div>
                <div class="text-sm text-gray-500">4/7天</div>
            </div>
            
            <div class="progress-stats">
                <div class="progress-stat">
                    <div class="progress-value">4</div>
                    <div class="progress-label">训练天数</div>
                </div>
                <div class="progress-stat">
                    <div class="progress-value">160</div>
                    <div class="progress-label">训练分钟</div>
                </div>
                <div class="progress-stat">
                    <div class="progress-value">620</div>
                    <div class="progress-label">消耗卡路里</div>
                </div>
            </div>
            
            <!-- 今日推荐训练 -->
            <div class="workout-card">
                <div class="workout-header">
                    <img src="https://images.unsplash.com/photo-1571019613914-85f342c6a11e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="有氧运动" class="workout-image">
                    <div class="workout-overlay">
                        <div class="workout-title">今日训练：全身燃脂</div>
                        <div class="workout-subtitle">中等强度 | 35分钟</div>
                    </div>
                </div>
                
                <div class="workout-details">
                    <div class="workout-description">
                        这套全身燃脂运动能够有效提高心率，加速新陈代谢，针对全身主要肌群进行锻炼，帮助塑造匀称体态。
                    </div>
                    
                    <div class="workout-stats">
                        <div class="workout-stat">
                            <div class="workout-stat-value">35</div>
                            <div class="workout-stat-label">分钟</div>
                        </div>
                        <div class="workout-stat">
                            <div class="workout-stat-value">185</div>
                            <div class="workout-stat-label">卡路里</div>
                        </div>
                        <div class="workout-stat">
                            <div class="workout-stat-value">中等</div>
                            <div class="workout-stat-label">强度</div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <div class="font-medium mb-2">训练内容</div>
                        <div class="exercise-item">
                            <div class="exercise-number">1</div>
                            <div class="exercise-info">
                                <div class="exercise-name">高抬腿热身</div>
                                <div class="exercise-duration">5分钟</div>
                            </div>
                            <button class="exercise-video-btn">
                                <i class="fas fa-play-circle"></i>
                            </button>
                        </div>
                        <div class="exercise-item">
                            <div class="exercise-number">2</div>
                            <div class="exercise-info">
                                <div class="exercise-name">跳跃深蹲</div>
                                <div class="exercise-duration">10分钟 · 3组</div>
                            </div>
                            <button class="exercise-video-btn">
                                <i class="fas fa-play-circle"></i>
                            </button>
                        </div>
                        <div class="exercise-item">
                            <div class="exercise-number">3</div>
                            <div class="exercise-info">
                                <div class="exercise-name">俯卧撑变式</div>
                                <div class="exercise-duration">10分钟 · 3组</div>
                            </div>
                            <button class="exercise-video-btn">
                                <i class="fas fa-play-circle"></i>
                            </button>
                        </div>
                        <div class="exercise-item">
                            <div class="exercise-number">4</div>
                            <div class="exercise-info">
                                <div class="exercise-name">平板支撑</div>
                                <div class="exercise-duration">5分钟 · 2组</div>
                            </div>
                            <button class="exercise-video-btn">
                                <i class="fas fa-play-circle"></i>
                            </button>
                        </div>
                        <div class="exercise-item">
                            <div class="exercise-number">5</div>
                            <div class="exercise-info">
                                <div class="exercise-name">拉伸放松</div>
                                <div class="exercise-duration">5分钟</div>
                            </div>
                            <button class="exercise-video-btn">
                                <i class="fas fa-play-circle"></i>
                            </button>
                        </div>
                    </div>
                    
                    <button class="btn-primary">开始训练</button>
                </div>
            </div>
            
            <!-- 推荐训练 -->
            <div>
                <div class="recommendation-header">
                    <div class="recommendation-title">适合你的训练</div>
                    <a href="#" class="text-green-500 text-sm">查看全部</a>
                </div>
                
                <div class="recommendation-list">
                    <div class="recommendation-item">
                        <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="瑜伽" class="recommendation-image">
                        <div class="recommendation-info">
                            <div class="recommendation-name">初级瑜伽</div>
                            <div class="recommendation-meta">
                                <div class="recommendation-meta-item">
                                    <i class="fas fa-clock"></i> 20分钟
                                </div>
                                <div class="recommendation-meta-item">
                                    <i class="fas fa-fire"></i> 120卡
                                </div>
                            </div>
                            <div class="text-xs text-gray-500">
                                适合初学者的轻松瑜伽课程，帮助放松身心
                            </div>
                        </div>
                    </div>
                    
                    <div class="recommendation-item">
                        <img src="https://images.unsplash.com/photo-1434596922112-19c563067271?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="有氧训练" class="recommendation-image">
                        <div class="recommendation-info">
                            <div class="recommendation-name">燃脂有氧</div>
                            <div class="recommendation-meta">
                                <div class="recommendation-meta-item">
                                    <i class="fas fa-clock"></i> 30分钟
                                </div>
                                <div class="recommendation-meta-item">
                                    <i class="fas fa-fire"></i> 220卡
                                </div>
                            </div>
                            <div class="text-xs text-gray-500">
                                强度适中的有氧运动，有效燃烧脂肪
                            </div>
                        </div>
                    </div>
                    
                    <div class="recommendation-item">
                        <img src="https://images.unsplash.com/photo-1616803689943-5601631c7fec?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="力量训练" class="recommendation-image">
                        <div class="recommendation-info">
                            <div class="recommendation-name">腹肌训练</div>
                            <div class="recommendation-meta">
                                <div class="recommendation-meta-item">
                                    <i class="fas fa-clock"></i> 15分钟
                                </div>
                                <div class="recommendation-meta-item">
                                    <i class="fas fa-fire"></i> 150卡
                                </div>
                            </div>
                            <div class="text-xs text-gray-500">
                                针对核心区域的高效训练，塑造平坦腹部
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 活动记录 -->
            <div class="activity-history">
                <div class="activity-header">
                    <div class="activity-title">最近活动</div>
                    <a href="#" class="text-green-500 text-sm">查看更多</a>
                </div>
                
                <div class="activity-item">
                    <div class="activity-icon activity-running">
                        <i class="fas fa-running"></i>
                    </div>
                    <div class="activity-info">
                        <div class="activity-name">户外跑步</div>
                        <div class="activity-meta">
                            <div class="activity-meta-item">
                                <i class="fas fa-calendar"></i> 昨天
                            </div>
                            <div class="activity-meta-item">
                                <i class="fas fa-clock"></i> 32分钟
                            </div>
                            <div class="activity-meta-item">
                                <i class="fas fa-route"></i> 3.5公里
                            </div>
                        </div>
                    </div>
                    <div class="activity-calories">
                        245卡
                    </div>
                </div>
                
                <div class="activity-item">
                    <div class="activity-icon activity-yoga">
                        <i class="fas fa-spa"></i>
                    </div>
                    <div class="activity-info">
                        <div class="activity-name">瑜伽训练</div>
                        <div class="activity-meta">
                            <div class="activity-meta-item">
                                <i class="fas fa-calendar"></i> 前天
                            </div>
                            <div class="activity-meta-item">
                                <i class="fas fa-clock"></i> 45分钟
                            </div>
                        </div>
                    </div>
                    <div class="activity-calories">
                        180卡
                    </div>
                </div>
                
                <div class="activity-item">
                    <div class="activity-icon activity-gym">
                        <i class="fas fa-dumbbell"></i>
                    </div>
                    <div class="activity-info">
                        <div class="activity-name">力量训练</div>
                        <div class="activity-meta">
                            <div class="activity-meta-item">
                                <i class="fas fa-calendar"></i> 3天前
                            </div>
                            <div class="activity-meta-item">
                                <i class="fas fa-clock"></i> 50分钟
                            </div>
                        </div>
                    </div>
                    <div class="activity-calories">
                        320卡
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <div class="tab-item" onclick="location.href='home.html'">
                <i class="tab-icon fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item" onclick="location.href='food-recognition.html'">
                <i class="tab-icon fas fa-camera"></i>
                <span>识别</span>
            </div>
            <div class="tab-item" onclick="location.href='diet-plan.html'">
                <i class="tab-icon fas fa-utensils"></i>
                <span>饮食</span>
            </div>
            <div class="tab-item active">
                <i class="tab-icon fas fa-dumbbell"></i>
                <span>运动</span>
            </div>
            <div class="tab-item" onclick="location.href='profile.html'">
                <i class="tab-icon fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 更新状态栏时间
        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.querySelector('.status-bar-time').textContent = `${hours}:${minutes}`;
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateTime();
            setInterval(updateTime, 60000);
            
            // 标签切换
            const tabs = document.querySelectorAll('.exercise-tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html> 